<template>
	<div class="goods">
		<div class="menu-wrapper" v-el:menu-wrapper>
			<ul class="menu-ul">
				<li class="menu-item" :class="{'current':currentIndex==$index}" v-for="item in goods" @click="selectMenu($index,$event)">
					<span class="text">
						<span v-show="item.type>0" class="icon">Q</span>{{item.name}}
					</span>
				</li>
			</ul>
		</div>
		<div class="foods-wrapper" v-el:foods-wrapper>
			<ul>
				<li class="food-list food-list-hook" v-for="item in goods">
					<h1 class="title">{{item.name}}</h1>
					<ul>
						<li class="food-item" v-for="food in item.foods" @click="selectFood(food,$event)">
							<div class="icon">
								<img width="57" height="57" :src="food.icon" alt="">
							</div>
							<div class="content">
								<h2 class="name">{{food.name}}</h2>
								<p class="desc">{{food.description}}</p>
								<div class="extra">
									<span class="count">月售{{food.sellCount}}份</span>
									<span>好评率{{food.rating}}%</span>
								</div>
								<div class="price">
									<span class="now">￥{{food.price}}</span>
									<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
								</div>
								<div class="cartcontrol-wrapper">
									<cart-control :food="food"></cart-control>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<shop-cart v-ref:shop-cart :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shop-cart>
	</div>
	<food :food="selectedFood" v-ref:food></food>
</template>

<script>
	import BScroll from 'better-scroll';
  	import ShopCart from 'components/shopCart/shopCart';
  	import cartControl from 'components/cartControl/cartControl';
  	import food from 'components/food/food';
	export default {
		props:{
			seller:{
				type: Object
			}
		},
		data() {
			return {
				goods:[],
				listHeight:[],
				scrollY:0,
				selectedFood:{}
			}
		},
		computed:{
			currentIndex(){
				for(let i=0;i<this.listHeight.length;i++){
					let height1 = this.listHeight[i];
					let height2 = this.listHeight[i+1];
					if(!height2 || (this.scrollY >= height1 && this.scrollY < height2)){
						return i;
					}
				}
				return 0;
			},
			selectFoods(){
				let foods = [];
				this.goods.forEach((good)=>{
					good.foods.forEach((food)=>{
						if(food.count){
							foods.push(food);
						}
					})
				})
				return foods;
			}
		},
		created() {
			this.$http.get('/api/goods').then((response)=>{
				let res = response.body;
				console.log(res);
				if(res.errno == 0){
					this.goods = res.data;
					this.$nextTick(()=>{
						this._initScroll();
						this._calculateHeight();
					});
				}
			})
		},
		components:{
			ShopCart,
			cartControl,
			food
		},
		methods:{
			//左侧菜单导航
			selectMenu(index,event){
				if(!event._constructed){
					return;
				}
				let foodList = this.$els.foodsWrapper.getElementsByClassName('food-list-hook');
				let el = foodList[index];
				this.foodsScroll.scrollToElement(el,300);
			},
			//点击进入商品详情
			selectFood(food,event){
				if(!event._constructed){
					return;
				}
				this.selectedFood = food;
				this.$refs.food.show();
			},
			//初始化bScroll组件
			_initScroll(){
				this.menuScroll = new BScroll(this.$els.menuWrapper,{
					click:true
				});
				this.foodsScroll = new BScroll(this.$els.foodsWrapper,{
					click:true,
					probeType:3
				});
				this.foodsScroll.on('scroll',(pos)=>{
					this.scrollY = Math.abs(Math.round(pos.y));
				})
			},
			//计算每个分类商品距离顶部的位置
			_calculateHeight(){
				let foodList = this.$els.foodsWrapper.getElementsByClassName('food-list-hook');
				let height = 0;
				this.listHeight.push(height);
				for(let i=0;i<foodList.length;i++){
					let item = foodList[i];
					height += item.clientHeight;
					this.listHeight.push(height);
				}
			},
			_drop(target){
				//体验优化，异步执行下落动画
				this.$nextTick(()=>{
					this.$refs.shopCart.drop(target);
				})
			}
		},
		events:{
			'cart.add'(target){
				this._drop(target);
			}
		}
	}
</script>

<style>
.goods{
	position: absolute;
	top: 141px;
	bottom: 46px;
	width: 100%;
	display: flex;
	overflow: hidden;
}
.menu-wrapper{
	flex: 0 0 80px;
	width: 80px;
	background: #f3f5f7;
}
.menu-ul{
	
}
.menu-ul .menu-item{
	display: table;
	height: 54px;
	line-height: 14px;
	padding: 0 12px;
}
.menu-ul .menu-item.current{
	background: #fff;
	font-weight: 700;
	position: relative;
	z-index: 10;
	margin-top: -1px;
}
.menu-ul .menu-item .text{
	display: table-cell;
	width: 56px;
	vertical-align: middle;
	font-size: 12px;
	border-bottom: 1px solid #ddd;
	text-align: center;
}
.menu-ul .menu-item.current .text{
	border-bottom: none;
}

.foods-wrapper{
	flex: 1;
}

.food-list .title{
	padding-left: 14px;
	height: 26px;
	line-height: 26px;
	border-left: 2px solid #d9dde1;
	font-size: 12px;
	color: rgb(147,153,159);
	background: #f3f5f7;
}

.food-item{
	display: flex;
	margin: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid #eee;
}
.food-item:last-child{
	margin-bottom: 0;
	border-bottom: none;
}
.food-item .icon{
	flex: 0 0 57px;
	margin-right: 10px;
}
.food-item .content{
	flex: 1;
	position: relative;
}
.food-item .content .name{
	margin: 2px 0 8px 0;
	height: 14px;
	line-height: 14px;
	font-size: 14px;
	color: rgb(7,17,27);
}
.food-item .content .desc{
	margin-bottom: 8px;
	line-height: 12px;
	font-size: 10px;
	color: rgb(147,153,159);
}
.food-item .content .extra{
	line-height: 10px;
	color: rgb(147,153,159);
}
.food-item .content .extra .count{
	margin-right: 12px;
}
.food-item .content .price{
	font-weight: 700;
	line-height: 24px;
}
.food-item .content .now{
	margin-right: 8px;
	font-size: 14px;
	color: rgb(240,20,20);
}
.food-item .content .old{
	text-decoration: line-through;
	font-size: 10px;
	color: rgb(147,153,159);
}
.cartcontrol-wrapper{
	position: absolute;
	right: 0;
	bottom: 12px;
}
</style>